<template>
	<view class="con-box">
		<view class="logoBox">
			<view class="navTitle">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="20	"></u-icon>
				</view>
				<view class="navBox">我的资产</view>
				<view class="icon-right"></view>
			</view>
			<image src="../../static/login/bg.png" class="bgImg"></image>

			<view class="info-card">
				<view class="totalAssets total-detail">
					<view class="money">{{total.toFixed(2)||'0.00'}}</view>
					<view class="money-detail">账户总额(元)</view>
				</view>
				<view class="total-detail">
					<view class="detail">
						<view class="money">
							{{userAccount.hotMoney?Number(userAccount.hotMoney).toFixed(2) : "0.00"}}
						</view>
						<view class="money-detail">可用金额</view>

					</view>
<!-- 					<view class="detail">
						<view class="money">
							{{userAccount.coldMoney?Number(userAccount.coldMoney).toFixed(2) : "0.00"}}
						</view>
						<view class="money-detail">冻结金额</view>

					</view> -->
					<view class="detail" @tap="navTo('/pages/user/balanceBill')">
						<view class="money">
							{{userAccount.coldMoney?Number(userAccount.coldMoney).toFixed(2) : "0.00"}}
						</view>
						<view class="money-detail" >冻结金额 <image src="../../static/user/fffback.png" class="back"></image></view>

					</view>
	<!-- 				<view class="detail">
						<view class="money">
							0.00
						</view>
						<view class="money-detail">委让冻结 <image src="../../static/user/fffback.png" class="back"></image></view>

					</view> -->
				</view>
			</view>

			<!-- 			<view class="link_address">
				<text v-if="userData.blockchainAccount">区块链地址：{{userData.blockchainAccount}}</text>
				<text v-else>区块链地址：...</text>
				<image v-if="userData.blockchainAccount" src="../../static/user/copy.png" class="copy" mode="widthFix" @tap="copy()"></image>
			</view> -->
		</view>
		<view class="main" v-if="isOpenAccount">
			<view class="btn_cent">
				<u-button class="custom-style btn1" @tap="navTo('/pages/user/withdrawal',1)">提现</u-button>
				<!-- <u-button class="custom-style btn1" @tap="forbid">提现</u-button> -->
				<u-button class="custom-style btn2"  @tap="navTo('/pages/user/recharge',2)">充值</u-button>
				<!-- <u-button class="custom-style btn2"  @tap="forbid">充值</u-button> -->
			</view>
			<view class="line"></view>

<!-- 			<view class="tab-list">
				<view class="list-item" v-for="(item,index) in listData" :key="index" @tap="navTo(item.path)">
					<view class="info">
						<image :src="item.imgUrl" mode="widthFix"></image>
						<text>{{item.name}}</text>
					</view>
					<view class="rightS">
						<text v-if="item.text">{{item.text}}</text>
						<u-icon name="arrow-right" color="#999" size="30upx"></u-icon>
					</view>
				</view>
			</view> -->
			
			<view class="detailed">
				<view class="detailed-top">
					<view class="">账户明细</view>
					<view class="more" @tap="navTo('/pages/user/billDetails')">
						<view class="">查看更多</view>
						<view class="">
							<u-icon name="arrow-right" color="#666" size="16"></u-icon>
						</view>
					</view>
				</view>
				<view class="detailed-list" v-if="list.length>0">
					<view class="detailed-list-item" v-for="(item,index) in list">
						<view class="list-item-left">
							<view class="title">{{item.explainValue}}</view>
							<view class="date">{{moment(item.created).format('YYYY-MM-DD HH:mm:ss')}}</view>
						</view>
						<view class="list-item-left" v-if="item.accountType == 1">
							<view class="money">{{item.recordType == 1?'+':'-'}} {{item.transactionMoney}}</view>
							<view class="balance">余额 {{item.balanceMoney}}</view>
						</view>
						<view class="list-item-left" v-else>
							<view class="money">{{item.recordType == 1?'+':'-'}} {{item.transactionMoney}}</view>
							<view class="balance">冻结 {{item.balanceMoney}}</view>
						</view>
					</view>
<!-- 					<view style="width: 100%;" v-if="list.length >= 6">
						<u-loadmore :status="status" />
					</view> -->
				</view>
				<view v-else class="noListBox">
					<view class="noData">
						<image class="noDataImg" src="../../static/home/noData.png" mode=""></image>
						<view class="text">暂无数据</view>
					</view>
				</view>
			</view>
		</view>
		<view class="openAccountBox" v-else>
			<view class="head">您尚未实名</view>
			<view class="submit-bottom">
				<view class="submit-btn" @tap="navTo('/pages/openAccount/index')">去实名</view>
			</view>
		</view>

		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		appfundaccountGetDetail,
		appfundaccountList,
		appfundaccountRecharge,
		appfundaccountWithdrawal,
		getWithdrawal
	} from '@/api/user.js';
	import {getUser} from '@/api/login.js'
	export default {
		data() {
			return {
				userAccount: {},
				isOpenAccount: true,
				listData: [{
						imgUrl: require("@/static/user/bank_card_line.png"),
						text: "",
						name: "银行卡",
						path: "/pages/setting/userBank"
					}, {
						imgUrl: require("@/static/user/Image1.png"),
						text: "未设置",
						name: "转让密码",
						path: "/pages/setting/payPassword"
					},
					// {
					// 	imgUrl:require("@/static/user/Image.png"),
					// 	text:"",
					// 	name:"认证信息",
					// 	path:"/pages/user/myAssets"
					// },
					{
						imgUrl: require("@/static/user/clipboard.png"),
						text: "",
						name: "转让明细",
						path: "/pages/user/balanceBill"
					},
					// {
					// 	imgUrl:require("@/static/user/warning_line.png"),
					// 	text:"",
					// 	name:"冻结记录",
					// 	path:"/pages/user/balanceBill"
					// },
				],
				list:[],
				page:1,
				pageSize:6,
				status: "loadmore",
				total:0
			}
		},
		async onShow() {
			let res = await getUser()
			if (res.status == 200) {
				if(res.data.user.isRealName == 0){
					this.isOpenAccount = false
				}
			}
			let row = await appfundaccountGetDetail();
			if(row.data.success){
				this.userAccount = row.data.obj;
				this.total = this.userAccount.hotMoney+this.userAccount.coldMoney
				console.log(this.total)
				this.getList(this.page,this.pageSize)
			}
		},
		// computed: {
		// 	totalFn() {
		// 		let num = 0
		// 		num = Number(num) > 0 ? Number(Number(this.userAccount.hotMoney) + Number(this.userAccount.coldMoney)).toFixed(2) :
		// 		"0.00";
		// 		console.log(num,'0000',this.userAccount.hotMoney,this.userAccount.coldMoney)
		// 		return num
		// 	}
		// },
		methods: {
			forbid(){
				this.$u.toast('由于通道维护，提现、充值暂停使用，请明天再试！');
			},
			copy() {
				uni.setClipboardData({
					data: this.userData.blockchainAccount,
					success: () => {
						this.$u.toast('复制成功！');
					}
				});
			},
			getList(page,pageSize) {
				console.log(page,pageSize)
				this.$refs.min_loading.open();
				appfundaccountList({page,pageSize}).then(res => {
					console.log(res)
					this.$refs.min_loading.close()
					if (page == 1) {
						this.list = [...res.data.rows]
					}else{
						this.list = [...this.list, ...res.data.rows]
					}
					// if (page > res.data.totalPage) {
					// 	this.status = 'nomore'
					// 	return
					// } else {
					// 	this.status = "loadmore"
					// }
					// if (res.data.rows.length > 0) {
					// 	this.page += 1
					// }
					
				});
			},
			navTo(path, i) {
				if(i==1){
					getWithdrawal().then(res=>{
						console.log(res);
						if(!res.data.success){
							this.$u.toast('提现受限！');
							return;
						}else{
							uni.navigateTo({
								url: path
							});
						}
					})
				}else{
					uni.navigateTo({
						url: path
					});
				}
				
			},
			submitFn(){
				
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.con-box {
		width: 100%;
		height: 100%;

		.main {
			background-color: #fff;
			position: relative;
			z-index: 1;
		}

		.openAccountBox {
			background-color: #fff;
			text-align: center;
			height: calc(100% - 500upx);
			font-size: 30upx;
			position: relative;
			z-index: 1;

			.head {
				padding-top: 78upx;
				font-weight: 800;
				margin-bottom: 36upx;
				color: #333333;
			}

			text {
				color: #666;
				display: block;
				line-height: 38upx;
			}

			.footButn {
				text-align: center;
				padding: 0 58upx;
				padding-top: 100upx;

				navigator {
					width: 100%;
					height: 100upx;
					line-height: 100upx;
					background-color: #2c1769;
					color: #fff;
				}
			}
		}

		.logoBox {
			width: 100%;
			// height: 668upx;
			// background-image: url("@/static/login/bg.png");
			// background-size: 100% 130%;
			// background-repeat: no-repeat;
			// background-position: center center; 

			.bgImg {
				width: 100%;
				height: 800upx;
				position: fixed;
				top: 0;
				left: 0;
			}

			.link_address {
				font-size: 24upx;
				color: #fff;
				padding: 0 30upx;
				padding-top: 60upx;
				display: flex;
				overflow: hidden;

				.copy {
					width: 28upx;
					margin-left: 60upx;
				}
			}

			.info-card {
				width: 100%;
				padding: 0 30upx;
				position: relative;
				z-index: 1;
				padding-bottom: 36upx;

				.total-detail {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #fff;
					padding-top: 50upx;

					.detail {
						text-align: center;
						flex: 1;
					}

					.money-detail {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin-top: 26upx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.back{
							width: 12upx;
							height: 20upx;
							margin-left: 8upx;
						}
					}

					.money {
						line-height: 40upx;
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}

				.totalAssets {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					padding-top: 0;

					.money-detail {
						font-size: 28upx;
						font-weight: 500;
						margin-top: 30upx;
					}

					.money {
						font-size: 48upx;
					}
				}
			}

			.navTitle {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120upx;
				padding: 0 30upx;
				margin-bottom: 80upx;
				position: relative;
				z-index: 1;

				.navBox {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
				}
			}

		}

		.btn_cent {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40upx 30upx;
			background-color: #fff;

			>view {
				width: 320upx;
				height: 80upx;
				font-size: 28upx;
				text-align: center;
				border-radius: 10upx;
			}

			.btn1 {
				line-height: 80upx;
				margin-right: 60upx;
				color: #fff;
				background-color: #CEA539;
			}

			.btn2 {
				color: #fff;
				line-height: 80upx;
				background-color: #CEA539;
			}
		}
		
		.line{
			width: 100%;
			height: 20upx;
			background: #F6F7F9;
		}
		
		.detailed{
			width: 100%;
			background-color: #fff;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			
			.detailed-top{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40upx 30upx;
				
				.more{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
			
			.detailed-list{
				width: 100%;
				
				.detailed-list-item{
					width: 100%;
					box-shadow: 1px 0px 1px 0px rgba(51, 51, 51, 0.1);
					padding: 30upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					
					.date{
						margin-top: 20upx;
						font-size: 24upx;
						color: 666;
					}
					
					.money{
						text-align: right;
						font-weight: bold;
					}
					
					.balance{
						margin-top: 20upx;
						font-size: 24upx;
						color: 666;
					}
				}
			}
		}

		.tab-list {
			padding: 6upx 30upx;
			background-color: #fff;

			.list-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16upx 0;
				color: #333;
				font-size: 30upx;
				border-bottom: 1px solid #F7F7F7;

				.info {
					display: flex;
					align-items: center;

					image {
						width: 70upx;
						margin-right: 20upx;
					}
				}

				.rightS {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					text {
						display: inline-block;
						line-height: 30upx;
						margin-right: 12upx;
					}
				}
			}

			.list-item:last-child {
				border: 0 none;
			}
		}
		
		.noListBox {
			text-align: center;
			.noData {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-top: 200upx;
				.noDataImg {
					width: 316upx;
					height: 126upx;
				}
				
				.text{
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #B0B5BC;
					line-height: 92upx;
				}
			}
		}
		
		.submit-bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 16upx 50upx 30upx;
			margin-top: 20upx;
		
			.submit-btn {
				width: 100%;
				height: 96upx;
				background: #CEA539;
				border-radius: 10upx;
				font-size: 32upx;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

	}
</style>
